<template>
  <div class="page-wrapper">
    <div class="goods-main-info">
      <div class="goods-imgs">
        <el-carousel class="banners" :interval="5000">
          <el-carousel-item v-for="(item,index) in arr" :key="index">
            <img :src="item" class="slide-image">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="count-down">
        <div class="title">
          <img class="title-bg" src="../../assets/count-bg.png" mode="aspectFill">
          <div class="title-name">秒杀说明</div>
        </div>
        <div class="right" v-if="state == '0' || state == '1'">
          <img class="icon-count" src="../../assets/icon-count.png" mode="aspectFill">
          <div class="count-title">
            <div class="sk-title" v-if="state == '0'">距秒杀开始：</div>
            <div class="sk-title" v-if="state == '1'">距秒杀结束：</div>
              {{time}}
          </div>
        </div>
      </div>
      <div class="goods-title">
        <div class="goods-price">
          <div class="price">
            <div class="main-price">
              <div class="icon-rmb">￥</div>{{productPromotePrice}}
            </div>
            <div class="sub-price">￥{{productPrice}}</div>
          </div>
          <div class="store">库存{{productStock}}件</div>
        </div>
        <div class="goods-name">{{goodsName}}</div>
      </div>
    </div>
    <div class="sku-info">
      <div class="sku-title">快递</div>
      <div class="select">￥{{freightPrice}}</div>
    </div>
    <div class="detail-info">
      <detailInfo :detailInfo.sync="detailInfo"></detailInfo>
    </div>
    <div class="fix-footer">
      <div class="handle-btns disabled-btn" v-if="state !== '1' || !canBuy">
        立刻购买
      </div>
      <div class="handle-btns" v-else @click="subBuy">
        立刻购买
      </div>
    </div>
  </div>
</template>
<script>
import { API } from '../../config'
import detailInfo from './components/detailInfo'
import moment from 'moment'

export default {
  components:{
    detailInfo
  },
  data(){
    return {
        productId: '',
        indicatorDots: true,
        arr: [1, 2, 3, 4, 5, 6, 7],
        tab: 0,
        state: '',
        time: 0,
        goodsName: '',
        freightPrice: '',
        productPrice: '',
        productStock: '0',
        productPromotePrice: '',
        productSkuId: '',
        detailInfo: {
          productDescription: '',
          buyInstructions: ''
        },
        canBuy: false
    }
  },
  methods:{
    // 切换tab
    toggleTab(e) {
      this.tab = parseInt(e.detail.value)
    },

    // 购买
    subBuy() {
      let vm = this
      vm.$router.push({path:'/order/order?productSkuId=' + this.productSkuId })
    },
    initFun() {
        let vm = this
        let accesstoken = vm.getLocalStorage('accesstoken')
        vm.$axios.get(API + '/product/getSecondBuyDetail/' + this.productId,{
          headers: {'accesstoken': accesstoken} //设置header信息
        }).then((res)=>{
            if (res.data.code === 200) {
                vm.arr = res.data.data.gallery
                vm.canBuy = res.data.data.canBuy
                vm.goodsName = res.data.data.productActivitiesDetailResDTO.productName
                vm.freightPrice = res.data.data.productActivitiesDetailResDTO.freightPrice
                vm.detailInfo.productDescription = res.data.data.productActivitiesDetailResDTO.productDescription
                vm.detailInfo.buyInstructions = res.data.data.productActivitiesDetailResDTO.buyInstructions
                vm.productPrice = res.data.data.productPrice
                vm.productPromotePrice = res.data.data.productPromotePrice
                vm.productStock = res.data.data.productStock
                vm.productSecondBuyStatus = res.data.data.productSecondBuyStatus
                vm.productSkuId = res.data.data.productSkuId
            if (res.data.data.productSecondBuyStatus === 'BEFOURBEGIN') {
                vm.state = '0'
                vm.time = parseFloat(res.data.data.msStartTimeTamp)
            } else if (res.data.data.productSecondBuyStatus === 'INPROGRESS') {
                vm.state = '1'
                vm.time = parseFloat(res.data.data.msEndTimeTamp)
            }
                vm.time = moment(vm.time).format('HH:mm:ss')
            }
        })
    }
  },
  mounted() {
    let vm = this
    vm.productId = vm.$route.query.id
    vm.initFun()
  },
}
</script>

<style lang='less' scoped>
@import '../../css/goods/skDetail.less';
</style>
